<template>
  <view class="container">
    <!-- 状态栏占位 -->
    <!-- <view class="status-bar"></view> -->
    
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-left">
        <view class="back-btn" @tap="goBack">
          <text class="icon">←</text>
        </view>
      </view>
      <view class="header-center">
        <text class="title">{{ courseInfo.title }}</text>
        <text class="subtitle">COURSE DETAIL</text>
      </view>
      <view class="header-right">
        <view class="share-btn">
          <text class="icon">⤴</text>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view class="main-content" scroll-y>
      <!-- 视频播放区域 -->
      <view class="video-section">
        <view class="video-container">
          <video 
            class="video-player"
            :src="courseInfo.videoUrl"
            :poster="courseInfo.poster"
            controls
            show-center-play-btn
            show-play-btn
            @play="handleVideoPlay"
            @pause="handleVideoPause"
            @ended="handleVideoEnd"
          >
          </video>
          <view class="video-overlay" v-if="!isPlaying">
            <view class="play-btn" @tap="playVideo">
              <text class="play-icon">▶</text>
            </view>
          </view>
        </view>
        
        <!-- 视频信息 -->
        <view class="video-info">
          <text class="video-title">{{ courseInfo.title }}</text>
          <view class="video-meta">
            <text class="duration">时长: {{ courseInfo.duration }}</text>
            <text class="views">观看: {{ courseInfo.views }}次</text>
            <text class="free-tag">免费</text>
          </view>
        </view>
      </view>

      <!-- 课程介绍 -->
      <view class="intro-section">
        <text class="section-title">课程介绍</text>
        <text class="intro-content">{{ courseInfo.description }}</text>
      </view>

      <!-- 课程大纲 -->
      <view class="outline-section">
        <text class="section-title">课程大纲</text>
        <view class="outline-list">
          <view 
            class="outline-item" 
            v-for="(item, index) in courseInfo.outline" 
            :key="index"
            @tap="handleOutlineClick(index)"
          >
            <view class="outline-number">{{ index + 1 }}</view>
            <view class="outline-content">
              <text class="outline-title">{{ item.title }}</text>
              <text class="outline-time">{{ item.time }}</text>
            </view>
            <view class="outline-status">
              <text class="status-icon" v-if="item.completed">✓</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 相关推荐 -->
      <view class="recommend-section">
        <text class="section-title">相关推荐</text>
        <view class="recommend-list">
          <view 
            class="recommend-item" 
            v-for="(item, index) in recommendCourses" 
            :key="index"
            @tap="handleRecommendClick(item.type)"
          >
            <view class="recommend-image">
              <text class="image-placeholder">{{ item.category }}</text>
            </view>
            <view class="recommend-info">
              <text class="recommend-title">{{ item.title }}</text>
              <text class="recommend-duration">{{ item.duration }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 学习进度 -->
      <view class="progress-section">
        <view class="progress-card">
          <text class="progress-title">学习进度</text>
          <view class="progress-bar">
            <view class="progress-fill" :style="{width: progress + '%'}"></view>
          </view>
          <text class="progress-text">{{ progress }}% 完成</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 页面参数
const courseType = ref('')
const isPlaying = ref(false)
const progress = ref(0)

// 课程信息
const courseInfo = computed(() => {
  const courses = {
    history: {
      title: '武夷山摩崖石刻历史',
      videoUrl: '/static/videos/history.mp4',
      poster: '/static/images/history-poster.jpg',
      duration: '25分钟',
      views: 1234,
      description: '武夷山摩崖石刻承载着深厚的历史文化底蕴，从唐代开始，历代文人墨客在此留下珍贵的石刻作品。本课程将带您深入了解这些石刻的历史背景、创作年代以及其承载的文化内涵，感受千年文明的传承与发展。',
      outline: [
        { title: '武夷山地理位置与历史背景', time: '5分钟', completed: false },
        { title: '唐宋时期的石刻艺术', time: '8分钟', completed: false },
        { title: '明清石刻的特色与发展', time: '7分钟', completed: false },
        { title: '现代保护与传承', time: '5分钟', completed: false }
      ]
    },
    art: {
      title: '石刻艺术鉴赏',
      videoUrl: '/static/videos/art.mp4',
      poster: '/static/images/art-poster.jpg',
      duration: '30分钟',
      views: 987,
      description: '摩崖石刻不仅是历史的见证，更是艺术的瑰宝。本课程从艺术鉴赏的角度，详细解析武夷山摩崖石刻的书法艺术、雕刻技法以及美学价值，帮助您提升艺术鉴赏能力。',
      outline: [
        { title: '石刻书法艺术特色', time: '10分钟', completed: false },
        { title: '雕刻技法与工艺', time: '8分钟', completed: false },
        { title: '构图与布局美学', time: '7分钟', completed: false },
        { title: '艺术价值与影响', time: '5分钟', completed: false }
      ]
    },
    protection: {
      title: '文物保护与传承',
      videoUrl: '/static/videos/protection.mp4',
      poster: '/static/images/protection-poster.jpg',
      duration: '20分钟',
      views: 756,
      description: '文物保护是传承历史文化的重要使命。本课程介绍武夷山摩崖石刻的保护现状、保护技术以及传承意义，让您了解文物保护工作的重要性和复杂性。',
      outline: [
        { title: '石刻保护面临的挑战', time: '6分钟', completed: false },
        { title: '现代保护技术与方法', time: '8分钟', completed: false },
        { title: '传承教育的重要性', time: '6分钟', completed: false }
      ]
    },
    experience: {
      title: '石刻拓印体验',
      videoUrl: '/static/videos/experience.mp4',
      poster: '/static/images/experience-poster.jpg',
      duration: '45分钟',
      views: 1456,
      description: '拓印是传统的石刻复制技艺，通过亲手体验拓印过程，您将更深入地理解石刻艺术的魅力。本课程将指导您完成一次完整的拓印体验，制作属于自己的石刻拓片。',
      outline: [
        { title: '拓印工具与材料准备', time: '10分钟', completed: false },
        { title: '拓印技法详解', time: '15分钟', completed: false },
        { title: '实际操作演示', time: '15分钟', completed: false },
        { title: '作品完成与保存', time: '5分钟', completed: false }
      ]
    }
  }
  return courses[courseType.value] || courses.history
})

// 推荐课程
const recommendCourses = ref([
  { title: '石刻艺术鉴赏', duration: '30分钟', category: '艺术', type: 'art' },
  { title: '文物保护与传承', duration: '20分钟', category: '保护', type: 'protection' },
  { title: '石刻拓印体验', duration: '45分钟', category: '体验', type: 'experience' }
])

// 页面加载
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  courseType.value = currentPage.options?.type || 'history'
})

// 方法
const goBack = () => {
  uni.navigateBack()
}

const playVideo = () => {
  isPlaying.value = true
}

const handleVideoPlay = () => {
  isPlaying.value = true
}

const handleVideoPause = () => {
  isPlaying.value = false
}

const handleVideoEnd = () => {
  isPlaying.value = false
  progress.value = 100
}

const handleOutlineClick = (index) => {
  console.log('大纲点击:', index)
}

const handleRecommendClick = (type) => {
  uni.redirectTo({
    url: `/pages/course-detail/course-detail?type=${type}`
  })
}
</script>

<style scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(180deg, #2d5a3d 0%, #1a3d2e 100%);
  color: #ffffff;
  box-sizing: border-box;
}
.status-bar {
  height: 44px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  position: relative;
  box-sizing: border-box;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-btn, .share-btn {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}

.subtitle {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

.main-content {
  flex: 1;
  padding: 0 16px;
  box-sizing: border-box;
}

.video-section {
  margin-bottom: 30px;
}

.video-container {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 15px;
  overflow: hidden;
  background: #000;
  box-sizing: border-box;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}

.play-btn {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-icon {
  font-size: 24px;
  color: #2d5a3d;
  margin-left: 3px;
}

.video-info {
  padding: 15px 0;
  box-sizing: border-box;
}

.video-title {
  display: block;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.video-meta {
  display: flex;
  align-items: center;
  gap: 15px;
}

.duration, .views {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.free-tag {
  background: #4caf50;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.intro-section, .outline-section, .recommend-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  display: block;
}

.intro-content {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.outline-list {
  background: rgba(74, 124, 89, 0.3);
  border-radius: 15px;
  padding: 15px;
  box-sizing: border-box;
}

.outline-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.outline-item:last-child {
  border-bottom: none;
}

.outline-number {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: rgba(74, 124, 89, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  margin-right: 15px;
}

.outline-content {
  flex: 1;
}

.outline-title {
  display: block;
  font-size: 15px;
  margin-bottom: 3px;
}

.outline-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.outline-status {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-icon {
  color: #4caf50;
  font-size: 16px;
  font-weight: bold;
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.recommend-item {
  background: rgba(74, 124, 89, 0.3);
  border-radius: 15px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-sizing: border-box;
}

.recommend-image {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.image-placeholder {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.recommend-info {
  flex: 1;
}

.recommend-title {
  display: block;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recommend-duration {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.progress-section {
  margin-bottom: 100px;
}

.progress-card {
  background: rgba(74, 124, 89, 0.3);
  border-radius: 15px;
  padding: 20px;
  box-sizing: border-box;
}

.progress-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.progress-fill {
  height: 100%;
  background: #4caf50;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}
</style>
